<template>
  <el-scrollbar
    :height="widget.options.height"
    :maxHeight="widget.options.maxHeight"
    :native="widget.options.native"
    :wrapStyle="widget.options.wrapStyle"
    :wrapClass="widget.options.wrapClass"
    :viewStyle="widget.options.viewStyle"
    :viewClass="widget.options.viewClass"
    :noresize="widget.options.noresize"
    :tag="widget.options.tag ? widget.options.tag : 'div'"
    :always="widget.options.always"
    :minSize="widget.options.minSize"
    :id="widget.options.id"
    :role="widget.options.role"
    :ariaLabel="widget.options.ariaLabel"
    :ariaOrientation="widget.options.ariaOrientation"
    @click.stop="selectField"
  >
    <slot></slot>
    {{ widget.options.scrollbarText }}
    <draggable-list :widget="widget"></draggable-list>
  </el-scrollbar>
</template>

<script setup>
import { assignmentWidget } from "@/views/pageDesign/components/globalVariable";
import draggableList from "@/components/draggableList";

defineOptions({
  name: "scrollbarWidget",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
});

let selectField = () => {
  assignmentWidget($props.widget);
};
</script>

<style lang="scss" scoped></style>
